<template>
  <cu-layout tabbar="/pages/goods/index" title="商品列表">
    <cu-goods-list :list="form.list" :status="form.status" />
  </cu-layout>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import $ from '@/sheep'

const { form } = $.useForm({
  page: 1,
  list: [],
  limit: 20,
  status: 'loadmore' // loading / nomore
})

onLoad(async(options) => {
  uni.hideTabBar()
  reload()
})
onReachBottom(() => {
  if (form.status === 'loadmore') {
    form.page += 1
    reload()
  }
})

function reload() {
  if (form.status !== 'loadmore') return
  form.status = 'loading'
  $.utils.get('/index/goodsList', {
    page: form.page,
    limit: form.limit
  }).then(res => {
    form.list = [...form.list, ...res.data]
    form.status = form.limit > res.data.length ? 'nomore' : 'loadmore'
  })
}

</script>
<style lang="scss">

</style>
